<template>
	<div class="panel-card">
		<!-- 用户信息 -->
		<div class="container">
			<van-row type="flex" justify="space-between" align="center">
				<van-col class="user-info">
					<div class="user-avatar">
						<van-image width="40" height="40" lazy-load src="https://t16img.yangkeduo.com/pdd_ims/img_check/v2/469B46FFFFFF03null/93c8b04a035c4e8bab290278afe6b496.jpg?imageMogr2/sharpen/50%7CimageView2/q/70/format/webp"
						 type="contain" />
					</div>
					<div class="user-name-time">
						<div class="name">炫卡食品官方旗舰店</div>
						<div class="time">12:26</div>
					</div>
				</van-col>
				<van-col class="scan">74012阅读</van-col>
			</van-row>
			<!-- 标题 -->
			<div class="title">【买一箱送一箱】大桶装 正宗嗨吃家酸辣粉红薯粉整箱批发方便面 限时新品抢购 速来手慢无！！！</div>
			<!-- 图片 -->
			<van-row class="img-wrapper">
				<van-col :span="8">
					<van-image lazy-load src="https://img.pddpic.com/mms-material-img/2020-07-21/e43bff92-2e02-4a84-8e50-cd6988214ee4.jpg.a.jpeg"
					 type="contain" />
				</van-col>
				<van-col :span="8">
					<van-image lazy-load src="https://t00img.yangkeduo.com/goods/images/2020-05-23/ced2c6a0-a904-486a-97a8-7807d3dcbb2a.jpg"
					 type="contain" />
				</van-col>
				<van-col :span="8">
					<van-image lazy-load src="https://t00img.yangkeduo.com/goods/images/2020-05-23/d0d28af3-0115-4bf0-a598-69cbf5689200.jpg"
					 type="contain" />
				</van-col>
			</van-row>
			<!-- 收藏,转发,点赞 -->
			<van-row class="favorite-share" type="flex" justify="space-between" align="center">
				<van-col>
					<van-icon size=".5rem" name="good-job-o" />点赞</van-icon>
				</van-col>
				<van-col>
					<van-icon size=".5rem" name="star-o" />收藏</van-icon>
				</van-col>
				<van-col>
					<van-icon size=".5rem" name="share" /> 转发</van-icon>
				</van-col>
			</van-row>
		</div>
		<!-- 用户信息 -->
		<div class="container">
			<van-row type="flex" justify="space-between" align="center">
				<van-col class="user-info">
					<div class="user-avatar">
						<van-image width="40" height="40" lazy-load src="https://t16img.yangkeduo.com/pdd_ims/mainObject/v1/pub_20200629f6f1f19436d749b596a5ad8b309646e5.jpg?imageView2/2/w/1300/q/80"
						 type="contain" />
					</div>
					<div class="user-name-time">
						<div class="name">欧选美妆专营店</div>
						<div class="time">10:26</div>
					</div>
				</van-col>
				<van-col class="scan">85082阅读</van-col>
			</van-row>
			<!-- 标题 -->
			<div class="title">【2支】旁氏pucky洗面奶女氨基酸米粹温和深层清洁泡泡玛特洁面乳</div>
			<!-- 图片 -->
			<van-row class="img-wrapper">
				<van-col :span="8">
					<van-image lazy-load src="https://t00img.yangkeduo.com/goods/images/2020-05-19/8d8f68a1-962d-4d4e-a63b-e94001e707aa.jpg"
					 type="contain" />
				</van-col>
				<van-col :span="8">
					<van-image lazy-load src="https://t00img.yangkeduo.com/goods/images/2020-03-13/80d3687e-3c94-445a-9f9d-43e2d266af54.jpg"
					 type="contain" />
				</van-col>
				<van-col :span="8">
					<van-image lazy-load src="https://t00img.yangkeduo.com/goods/images/2020-05-19/b0588e99-961f-4b79-a2f0-588628e3cba2.jpeg"
					 type="contain" />
				</van-col>
			</van-row>
			<!-- 收藏,转发,点赞 -->
			<van-row class="favorite-share" type="flex" justify="space-between" align="center">
				<van-col>
					<van-icon size=".5rem" name="good-job-o" />点赞</van-icon>
				</van-col>
				<van-col>
					<van-icon size=".5rem" name="star-o" />收藏</van-icon>
				</van-col>
				<van-col>
					<van-icon size=".5rem" name="share" /> 转发</van-icon>
				</van-col>
			</van-row>
		</div>
		<!-- 用户信息 -->
		<div class="container">
			<van-row type="flex" justify="space-between" align="center">
				<van-col class="user-info">
					<div class="user-avatar">
						<van-image width="40" height="40" lazy-load src="https://t00img.yangkeduo.com/goods/images/2019-01-22/30fc4365cf5bc7e1d85def47684608c2.gif?imageView2/2/w/1300/q/80"
						 type="contain" />
					</div>
					<div class="user-name-time">
						<div class="name">蜜丝婷</div>
						<div class="time">10:26</div>
					</div>
				</van-col>
				<van-col class="scan">69084阅读</van-col>
			</van-row>
			<!-- 标题 -->
			<div class="title">泰国Mistine小黄帽小蓝帽防晒霜学生女男面部防水神器防紫外线50+</div>
			<!-- 图片 -->
			<van-row class="img-wrapper">
				<van-col :span="8">
					<van-image lazy-load src="https://t00img.yangkeduo.com/goods/images/2020-03-02/ea7862f5-f56b-4658-b931-8df6d2392d57.jpg"
					 type="contain" />
				</van-col>
				<van-col :span="8">
					<van-image lazy-load src="https://t00img.yangkeduo.com/goods/images/2020-03-02/b1e26c3d-13c1-4e00-bdf1-ee5cc34bd1a5.jpg"
					 type="contain" />
				</van-col>
				<van-col :span="8">
					<van-image lazy-load src="https://t00img.yangkeduo.com/goods/images/2020-03-02/c5595f57-565a-436b-a42d-5b1f1f4b0a72.jpg"
					 type="contain" />
				</van-col>
			</van-row>
			<!-- 收藏,转发,点赞 -->
			<van-row class="favorite-share" type="flex" justify="space-between" align="center">
				<van-col>
					<van-icon size=".5rem" name="good-job-o" />点赞</van-icon>
				</van-col>
				<van-col>
					<van-icon size=".5rem" name="star-o" />收藏</van-icon>
				</van-col>
				<van-col>
					<van-icon size=".5rem" name="share" /> 转发</van-icon>
				</van-col>
			</van-row>
		</div>
		<!-- 用户信息 -->
		<div class="container">
			<van-row type="flex" justify="space-between" align="center">
				<van-col class="user-info">
					<div class="user-avatar">
						<van-image width="40" height="40" lazy-load src="https://t00img.yangkeduo.com/goods/images/2019-01-24/807a5236131fdf3a694eee0aa759b5c8.jpeg?imageView2/2/w/1300/q/80"
						 type="contain" />
					</div>
					<div class="user-name-time">
						<div class="name">完美日记</div>
						<div class="time">9:36</div>
					</div>
				</van-col>
				<van-col class="scan">72089阅读</van-col>
			</van-row>
			<!-- 标题 -->
			<div class="title">【限时低价】完美日记小金钻口红轻雾哑光唇膏保湿口红学生豆沙</div>
			<!-- 图片 -->
			<van-row class="img-wrapper">
				<van-col :span="8">
					<van-image lazy-load src="https://t00img.yangkeduo.com/goods/images/2020-05-31/ee969de0-0b14-45ae-be45-870890d8d965.jpg"
					 type="contain" />
				</van-col>
				<van-col :span="8">
					<van-image lazy-load src="https://t00img.yangkeduo.com/goods/images/2020-01-30/0ff96a83-26de-4dcb-b000-319d8da7c46f.jpg"
					 type="contain" />
				</van-col>
				<van-col :span="8">
					<van-image lazy-load src="https://t00img.yangkeduo.com/goods/images/2020-01-30/aa4825f1-83b5-4753-a2d9-e045fa3173d2.jpg"
					 type="contain" />
				</van-col>
			</van-row>
			<!-- 收藏,转发,点赞 -->
			<van-row class="favorite-share" type="flex" justify="space-between" align="center">
				<van-col>
					<van-icon size=".5rem" name="good-job-o" />点赞</van-icon>
				</van-col>
				<van-col>
					<van-icon size=".5rem" name="star-o" />收藏</van-icon>
				</van-col>
				<van-col>
					<van-icon size=".5rem" name="share" /> 转发</van-icon>
				</van-col>
			</van-row>
		</div>
		<!-- 用户信息 -->
		<div class="container">
			<van-row type="flex" justify="space-between" align="center">
				<van-col class="user-info">
					<div class="user-avatar">
						<van-image width="40" height="40" lazy-load src="https://t00img.yangkeduo.com/goods/images/2020-01-09/09163065-e552-4782-8f52-6c423e8222c6_suffix.jpg?imageView2/2/w/1300/q/80"
						 type="contain" />
					</div>
					<div class="user-name-time">
						<div class="name">联合利华惠美美专卖店</div>
						<div class="time">9:15</div>
					</div>
				</van-col>
				<van-col class="scan">36849阅读</van-col>
			</van-row>
			<!-- 标题 -->
			<div class="title">【官方正品】奥妙洗衣凝珠樱花香味持久浓缩洗衣液除菌除螨家庭装</div>
			<!-- 图片 -->
			<van-row class="img-wrapper">
				<van-col :span="8">
					<van-image lazy-load src="https://img.pddpic.com/mms-material-img/2020-07-27/58ecf0af-dd88-4cc6-9796-6831293230ae.jpg.a.jpeg"
					 type="contain" />
				</van-col>
				<van-col :span="8">
					<van-image lazy-load src="https://img.pddpic.com/mms-material-img/2020-08-02/79d2ff6f-16cb-4c8b-ad8f-af9da315d10c.jpg.a.jpeg"
					 type="contain" />
				</van-col>
				<van-col :span="8">
					<van-image lazy-load src="https://t00img.yangkeduo.com/goods/images/2019-05-05/3e1c1ebc-266a-4b8a-acfb-e41ebf411b1d.jpg"
					 type="contain" />
				</van-col>
			</van-row>
			<!-- 收藏,转发,点赞 -->
			<van-row class="favorite-share" type="flex" justify="space-between" align="center">
				<van-col>
					<van-icon size=".5rem" name="good-job-o" />点赞</van-icon>
				</van-col>
				<van-col>
					<van-icon size=".5rem" name="star-o" />收藏</van-icon>
				</van-col>
				<van-col>
					<van-icon size=".5rem" name="share" /> 转发</van-icon>
				</van-col>
			</van-row>
		</div>
	</div>
</template>

<script>
	export default {};
</script>

<style lang="scss" scoped>
	.panel-card {
		padding: 10px;
		padding-bottom: 0;

		.container {
			background-color: #fff;
			border-radius: 5px;
			padding: 10px;

			// 用户信息
			.user-info {
				display: flex;

				.user-avatar {
					margin-right: 5px;
				}

				.user-name-time {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 3px;

					.name {
						color: #000;
						font-weight: bold;
					}
				}
			}

			.scan {
				color: #bbb;
			}

			// 标题
			.title {
				margin-top: 5px;
				font-size: 14px;
			}

			.img-wrapper {
				margin-top: 10px;

				.van-col {
					padding: 0 3px;
				}
			}

			.favorite-share {
				margin-top: 5px;

				.van-col {
					display: flex;
					align-items: center;
					color: #aaa;

					span {
						margin-left: 3px;
					}
				}
			}
		}
	}
</style>
